<template>
  <div>
    <el-button type="primary" @click="openDialog">打开字符选择器(对话框)</el-button>
    
    <el-dialog
      v-model="dialogVisible"
      title="字符选择器"
      width="600px"
    >
      <CharacterSelector 
        ref="charSelectorRef"
        @character-selected="onCharacterSelected"
      />
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="confirmSelection">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import CharacterSelector from './CharacterSelector.vue'

const dialogVisible = ref(false)
const charSelectorRef = ref(null)
const selectedCharacters = ref('')

const openDialog = () => {
  dialogVisible.value = true
  selectedCharacters.value = ''
  // 清空之前的选择
  if (charSelectorRef.value) {
    charSelectorRef.value.clearSelection()
  }
}

const closeDialog = () => {
  dialogVisible.value = false
}

const onCharacterSelected = (char) => {
  // 可以在这里处理字符选择事件
  console.log('选择了字符:', char)
}

const confirmSelection = () => {
  if (charSelectorRef.value) {
    const chars = charSelectorRef.value.getSelectedChars()
    selectedCharacters.value = chars
    ElMessage.success(`已选择字符: ${chars}`)
  }
  dialogVisible.value = false
}
</script>



<template>
  <div>
    <el-button type="success" @click="openDrawer">打开字符选择器(抽屉)</el-button>
    
    <el-drawer
      v-model="drawerVisible"
      title="字符选择器"
      direction="rtl"
      size="500px"
    >
      <CharacterSelector 
        ref="drawerCharSelectorRef"
        @character-selected="onCharacterSelected"
      />
      
      <template #footer>
        <div style="display: flex; justify-content: space-between;">
          <el-button @click="closeDrawer">关闭</el-button>
          <el-button type="primary" @click="useSelectedChars">使用选中字符</el-button>
        </div>
      </template>
    </el-drawer>
    
    <!-- 显示选中的字符 -->
    <div v-if="finalSelectedChars" style="margin-top: 20px;">
      <el-input
        v-model="finalSelectedChars"
        placeholder="最终选中的字符"
        readonly
      >
        <template #append>
          <el-button @click="copyFinalChars">复制</el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import CharacterSelector from './CharacterSelector.vue'

const drawerVisible = ref(false)
const drawerCharSelectorRef = ref(null)
const finalSelectedChars = ref('')

const openDrawer = () => {
  drawerVisible.value = true
  finalSelectedChars.value = ''
  // 清空之前的选择
  if (drawerCharSelectorRef.value) {
    drawerCharSelectorRef.value.clearSelection()
  }
}

const closeDrawer = () => {
  drawerVisible.value = false
}

const onCharacterSelected = (char) => {
  // 处理字符选择事件
  console.log('抽屉中选择了字符:', char)
}

const useSelectedChars = () => {
  if (drawerCharSelectorRef.value) {
    finalSelectedChars.value = drawerCharSelectorRef.value.getSelectedChars()
    ElMessage.success('字符已应用')
    drawerVisible.value = false
  }
}

const copyFinalChars = async () => {
  if (!finalSelectedChars.value) {
    ElMessage.warning('没有字符可复制')
    return
  }
  
  try {
    await navigator.clipboard.writeText(finalSelectedChars.value)
    ElMessage.success('已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败')
  }
}
</script>